<template>
    <div class="customer">
        <div class="query">
            <yd-cell-group>
                <yd-cell-item arrow>
                    <span slot="left">日期：</span>
                    <yd-datetime type="month" v-model="date" slot="right" :callback="getDate"
                                 :end-date='endDate'></yd-datetime>
                </yd-cell-item>
            </yd-cell-group>
        </div>
        <div v-if="list&&list.length==0" class="no-data"><i class="iconfont icon-icon-test1"></i>暂无该月返佣统计数据</div>
        <yd-infinitescroll v-if="list.length!=0" :callback="loadList" ref="infinitescrollDemo">
            <yd-preview v-for="(item, key) in list" :buttons="btns" :key="key" slot="list">

                <yd-preview-header>
                    <div slot="left">类型</div>
                    <div slot="right">{{item.rebateTypeStr}}</div>
                </yd-preview-header>
                <yd-preview-item>
                    <div slot="left">返佣账号</div>
                    <div slot="right">{{item.mt5Account}}</div>
                </yd-preview-item>
                <yd-preview-item>
                    <div slot="left">返佣金额（$）</div>
                    <div slot="right">{{item.amount}}</div>
                </yd-preview-item>
                <yd-preview-item>
                    <div slot="left">返佣时间</div>
                    <div slot="right">{{item.rebateDate}}</div>
                </yd-preview-item>
            </yd-preview>
            <!-- 数据全部加载完毕显示 -->
            <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>

            <!-- 加载中提示，不指定，将显示默认加载中图标 -->
            <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>
        </yd-infinitescroll>
        <yd-backtop></yd-backtop>
    </div>
</template>

<script>
    import AjaxHttp from '../../js/ajaxHttp.js';
    import Vue from 'vue';
    import {InfiniteScroll} from 'vue-ydui/dist/lib.rem/infinitescroll';

    Vue.component(InfiniteScroll.name, InfiniteScroll);

    export default{
        data(){
            return {
                list: [],
                btns: [],
                pageNo: 1,
                pageSize: 10,
                date: '',
                endDate: ''
            }
        },
        created(){
            //this.getList(false, this.pageNo, this.pageSize, this.date);
            const date = new Date();
            const year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            this.date = '' + year + '-' + month;
            this.endDate = '' + year + '-' + month;
        },
        methods: {
            getList(flag, pageNo, pageSize, selectDate){
                const _this = this;
                AjaxHttp.getHttp('trades/statistics/indexRebate?pageNo=' + pageNo + '&pageSize=' + pageSize + '&selectDate=' + selectDate).then(function (response) {
                    console.log(response);
                    //response.page.records = [];
                    if (flag) {
                        const _list = response.records;
                        _this.list = _this.list.concat(_list);
                        console.log(_list.length);
                        if (_list.length < _this.pageSize) {
                            /* 所有数据加载完毕 */
                            _this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                            return;
                        }

                        /* 单次请求数据完毕 */
                        _this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
                    }else{
                        _this.list = response.records;

                    }

                    _this.pageNo++;
                });
            },
            loadList(){
                this.getList(true, this.pageNo, this.pageSize, this.date);
            },
            getDate(){
                this.pageNo = 1;
                this.getList(false, this.pageNo, this.pageSize, this.date);
            }
        }
    }
</script>